<!doctype html>
<html prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/CreativeWork">
  <head>
    <meta charset="utf-8">
    <title>Patatap</title>

    <meta name="keywords" content="patatap, neuronal synchrony, music, audio, visual, app, 2d, jonobr1, lullatone, synesthesia">
    <meta name="author" content="jonobr1">

    <!-- Sharing -->
    <meta name="name" content="Patatap">
    <meta name="image" content="http://www.patatap.com/images/thumbnail.png">
    <meta name="description" content="Patatap is a portable animation and sound kit. With the touch of a finger create melodies charged with moving shapes. Warning: contains flashing images.">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Patatap">
    <meta name="twitter:description" content="Patatap is a portable animation and sound kit. With the touch of a finger create melodies charged with moving shapes. Warning: contains flashing images.">
    <meta name="twitter:creator" content="@jonobr1">
    <meta name="twitter:image:src" content="http://www.patatap.com/images/thumbnail.png">
    <meta name="twitter:app:name:iphone" content="Patatap">
    <meta name="twitter:app:name:ipad" content="Patatap">
    <meta name="twitter:app:url:iphone" content="https://itunes.apple.com/us/app/patatap/id880626868?mt=8">
    <meta name="twitter:app:url:ipad" content="https://itunes.apple.com/us/app/patatap/id880626868?mt=8">
    <meta name="twitter:app:id:iphone" content="id880626868">
    <meta name="twitter:app:id:ipad" content="id880626868">
    <meta name="twitter:app:name:googleplay" content="Patatap">
    <meta name="twitter:app:id:googleplay" content="com.jonobr1.Patatap">
    <meta name="twitter:app:url:googleplay" content="https://play.google.com/store/apps/details?id=com.jonobr1.Patatap">

    <meta itemprop="name" content="Patatap">
    <meta itemprop="description" content="Patatap is a portable animation and sound kit. With the touch of a finger create melodies charged with moving shapes. Warning: contains flashing images.">
    <meta itemprop="image" src="http://www.patatap.com/images/thumbnail.png">

    <meta property="og:title" content="Patatap">
    <meta property="og:type" content="website">
    <meta property="og:image" content="http://www.patatap.com/images/thumbnail.png"/>
    <meta property="og:site_name" content="Patatap">
    <meta property="og:description" content="Patatap is a portable animation and sound kit. With the touch of a finger create melodies charged with moving shapes. Warning: contains flashing images.">

    <!-- iOS specific catches -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="format-detection" content="telephone=no">

    <!-- icons -->
    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png"/>
    <link rel="icon" href="/images/favicon.ico" />

    <!-- styles -->
    <link href='//fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" media="screen" type="text/css" href="/styles/main.css" />

  </head>
  <body>
    <h1 style="width: 0; height: 0; overflow: hidden;">
      Patatap is a portable animation and sound kit. With the touch of a finger create melodies charged with moving shapes. Warning: contains flashing images.
    </h1>
    <div id="credits" style="display: none;">
      <ul>
        <li>
          <a href="http://patatap.com" target="_blank" style="border-bottom: 0;"><strong>Patatap</strong></a>
        </li>
        <li>
          <a href="http://typatone.com" target="_blank">Typatone</a>
        </li>
        <li>
          <a href="mailto:inquiries@patatap.com">Inquiries</a>
        </li>
        <li>
          <a id="embed-button" href="#" title="Embed Patatap on your site">Embed</a>
        </li>
        <li>
          <a id="merchandise-button" href="#" title="Support the creators of Patatap">Merchandise</a>
        </li>
        <li>
          <a id="jonobr1" href="http://jonobr1.com/" target="_blank">jonobr1</a> + <a id="lullatone" href="http://lullatone.com/" target="_blank">lullatone</a>
        </li>
      </ul>
    </div>
    <div id="content"></div>
    <div id="hint" style="display: none;">
      <p class="message"></p>
      <a class="ios-app-store" href="https://itunes.apple.com/us/app/patatap/id880626868?ls=1&mt=8" target="_blank"></a>
      <a class="play-store" href="https://play.google.com/store/apps/details?id=com.jonobr1.Patatap" target="_blank"></a>
    </div>
    <div id="embed" style="display: none;">
      <textarea><iframe src="//patatap.com/" style="border: 3px solid #ccc" width="640" height="480"></iframe></textarea>
    </div>
    <div id="merchandise" style="z-index: -1; opacity: 0.0;">
      <div class="container">
        <div id="close-merchandise">&times;</div>
        <div class="vimeo">
          <iframe src="//player.vimeo.com/video/95057507?title=0&amp;byline=0&amp;portrait=0&amp;color=e34d73" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
        <ul>
          <li class="music">
            <iframe style="border: 0; width: 170px; height: 313px;" src="//bandcamp.com/EmbeddedPlayer/album=2161956980/size=large/bgcol=ffffff/linkcol=333333/tracklist=false/transparent=true/" seamless><a href="http://lullatone.bandcamp.com/album/soundtracks-for-everyday-adventures">Soundtracks for Everyday Adventures by Lullatone</a></iframe>
          </li>
          <li class="poster">
            <a href="https://www.behance.net/gallery/Synesthesia/8354443" target="_blank">
              <div id="synesthesia" class="thumbnail"></div>
            </a>
            <div class="information">
              <p class="title">
                <a href="https://www.behance.net/gallery/Synesthesia/8354443" target="_blank"><strong>Synesthesia</strong></a>
              </p>
              <p class="artist">
                 by jonobr1
              </p>
              <p class="description">
                Take home a 27"x40" poster made with Patatap &mdash; $50.00
              </p>
              <p class="action">
                <a href="http://society6.com/jonobr1/Synesthesia-Zbs_Print#1=3" target="_blank">buy</a> <a href="https://www.behance.net/gallery/Synesthesia/8354443" target="_blank">share</a>
              </p>
            </div>
          </li>
          <li class="music">
            <iframe style="border: 0; width: 170px; height: 313px;" src="//bandcamp.com/EmbeddedPlayer/album=3832398802/size=large/bgcol=ffffff/linkcol=333333/tracklist=false/transparent=true/" seamless><a href="http://lullatone.bandcamp.com/album/while-winter-whispers">while winter whispers by Lullatone</a></iframe>
          </li>
          <li class="poster">
            <a href="https://www.behance.net/gallery/Anatomy-of-a-Polygon/12715463" target="_blank">
              <div id="two-polygon" class="thumbnail"></div>
            </a>
            <div class="information">
              <p class="title">
                <a href="https://www.behance.net/gallery/Anatomy-of-a-Polygon/12715463" target="_blank"><strong>Anatomy of a Polygon</strong></a>
              </p>
              <p class="artist">
                 by jonobr1
              </p>
              <p class="description">
                Support open-source, with a poster for <a href="http://jonobr1.github.com/two.js" target="_blank">Two.js</a> &mdash; $50.00
              </p>
              <p class="action">
                <a href="http://society6.com/jonobr1/Anatomy-of-a-Polygon_Print#1=3" target="_blank">buy</a> <a href="https://www.behance.net/gallery/Anatomy-of-a-Polygon/12715463" target="_blank">share</a>
              </p>
            </div>
          </li>
          <li class="music">
            <iframe style="border: 0; width: 170px; height: 313px;" src="//bandcamp.com/EmbeddedPlayer/album=1238287256/size=large/bgcol=ffffff/linkcol=333333/tracklist=false/transparent=true/" seamless><a href="https://lullatone.bandcamp.com/album/thinking-about-thursdays">Thinking About Thursdays by Lullatone</a></iframe>
          </li>
        </ul>
        <!-- Insert iOS App Store Button here -->
        <div class="app-cta-container">
          <a class="ios-app-store" href="https://itunes.apple.com/us/app/patatap/id880626868?ls=1&mt=8" target="_blank"></a>
          <a class="play-store" href="https://play.google.com/store/apps/details?id=com.jonobr1.Patatap" target="_blank"></a>
        </div>

        <div class="attribution">

          <p>
            If you like Patatap you might like our other project <a href="http://typatone.com" target="_blank">Typatone</a>.
          </p>
          <p class="nb">
            <a href="http://lullatone.com/" target="_blank">lullatone</a> &middot; <a href="http://about.jonobr1.com/" target="_blank">jonobr1</a> &middot; <a class="mailto" href="mailto:inquiries@patatap.com">inquiries</a> &middot; <a href="/privacy-policy.html" target="_blank">terms</a>
          </p>
          <p class="nb">
            &copy; 2014
          </p>

        </div>

      </div>
    </div>
    <div id="lobby">
      <div id="loader"></div>
      <div id="asset-info">
        <span id="loaded">0</span> / <span id="total-assets">26</span>
      </div>
    </div>
    <div class="scripts" style="display: none;">
      <script src="/node_modules/mpe/lib/mpe.js"></script>
      <script src="/third-party/has.js"></script>
      <script src="/third-party/url.js"></script>
      <script src="/third-party/jquery.js"></script>
      <script>

        /**
         * Check before loading JavaScript that we have the necessary features
         * in order to run the project. If we don't throw an error and display
         * the error page.
         */
        if (!Object.defineProperty || !(window.AudioContext || window.webkitAudioContext)) {
          $(function() {
            $('#lobby').fadeOut();
            $('#merchandise').css({
              opacity: 1.0,
              display: 'none',
              zIndex: 0
            }).fadeIn();
            $('#close-merchandise').css('display', 'none');
          });
          throw 'Oof, I cannot load this application because it will break...';
        }

      </script>
      <script src="/third-party/tween.js"></script>
      <script src="/third-party/two.js"></script>
      <script src="/src/sound.js"></script>
      <script src="/src/animations.js"></script>
      <script src="/src/main.js"></script>
      <script>

      $(function() {

        var $window = $(window);
        var instrument = window.mpe();
        var notes = {
          '49': false,
          '51': false,
          '54': false,
          '56': false,
          '58': false,
          '61': false,
          '63': false,
          '66': false,
          '68': false,
          '70': false,
          '48': false,
          '50': false,
          '52': false,
          '53': false,
          '55': false,
          '57': false,
          '59': false,
          '60': false,
          '62': false,
          '64': false,
          '65': false,
          '67': false,
          '69': false,
          '71': false
        };

        instrument.subscribe(_.throttle(function(e) {
          var touches = {};
          for (var i = 0; i < e.length; i++) {
            var data = e[i];
            var index = 81;
            var note = data.noteNumber;
            var velocity = data.noteOnVelocity;
            var pressure = data.pressure;
            touches[note] = true;
          }
          for (var note in notes) {
            if (notes[note] !== touches[note]) {
              notes[note] = touches[note];
              if (notes[note]) {
                var index = convertNoteToIndex(note);
                $window.trigger('keydown', index);
              }
            }
          }
        }, 1000 / 32));

        function convertNoteToIndex(noteNumber) {

          var index = 81;

          switch (noteNumber) {

            case 49:
            case '49':
              index = 71;
              break;
            case 51:
            case '51':
              index = 72;
              break;
            case 54:
            case '54':
              index = 74;
              break;
            case 56:
            case '56':
              index = 75;
              break;
            case 58:
            case '58':
              index = 76;
              break;
            case 61:
            case '61':
              index = 90;
              break;
            case 63:
            case '63':
              index = 88;
              break;
            case 66:
            case '66':
              index = 67;
              break;
            case 68:
            case '68':
              index = 86;
              break;
            case 70:
            case '70':
              index = 66;
              break;

            case 48:
            case '48':
              index = 81;
              break;
            case 50:
            case '50':
              index = 87;
              break;
            case 52:
            case '52':
              index = 69;
              break;
            case 53:
            case '53':
              index = 82;
              break;
            case 55:
            case '55':
              index = 84;
              break;
            case 57:
            case '57':
              index = 89;
              break;
            case 59:
            case '59':
              index = 85;
              break;
            case 60:
            case '60':
              index = 73;
              break;
            case 62:
            case '62':
              index = 79;
              break;
            case 64:
            case '64':
              index = 80;
              break;
            case 65:
            case '65':
              index = 65;
              break;
            case 67:
            case '67':
              index = 83;
              break;
            case 69:
            case '69':
              index = 68;
              break;
            case 71:
            case '71':
              index = 70;
              break;
          }

          return index;

        }

        navigator.requestMIDIAccess().then(function(access) {
          access.inputs.forEach(function(midiInput) {
            midiInput.addEventListener('midimessage',function(e) {
              instrument.processMidiMessage(e.data);
            });
          });
        });

      });

      </script>
      <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-48525045-1', 'patatap.com');
        ga('send', 'pageview');

      </script>
    </div>
  </body>
</html>
